
<toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>

<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main"><i class="glyphicon glyphicon-modal-window"></i> 设备管理</a></li>
        <li><a ui-sref="main.dm.map" class="active">电子地图</a></li>
    </ul>
</div>

<!-- 内容区域 -->
<div class="wrapper-md content">

<div id="allmap" style="width: 100%;height:650px;margin-top: 40px;">
	
</div>
</div><!-- /.wrapper-md -->

<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VQEvQ3CP3vkR4jPbpjUs80S8"></script> -->

<script type="text/javascript">

	var geoc = new BMap.Geocoder(); 
	//百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	var lng = 113.1845;
	var lat = 23.12869;
	
	//浏览器定位
	var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				lng = r.point.lng;
				lat = r.point.lat;
			}
			
			map.centerAndZoom(new BMap.Point(lng,lat), 15);  // 初始化地图,设置中心点坐标和地图级别
			var top_left_control = new BMap.NavigationControl({
			 anchor: BMAP_ANCHOR_TOP_LEFT,
			 type: BMAP_NAVIGATION_CONTROL_ZOOM,
			 offset: new BMap.Size(10, 200)
			});
			map.addControl(top_left_control);
			map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			map.setMapStyle({
			 styleJson: [{
			     "featureType": "highway",
			     "elementType": "all",
			     "stylers": {
			         "visibility": "off"
			     }
			 }, {
			     "featureType": "subway",
			     "elementType": "all",
			     "stylers": {
			         "visibility": "off"
			     }
			 }, {
			     "featureType": "railway",
			     "elementType": "all",
			     "stylers": {
			         "visibility": "off"
			     }
			 }]
			});
			
			laodMap(lng,lat);
			      
		},{enableHighAccuracy: true}) 
			
	
	//停止拖拽地图时触发
	map.addEventListener("dragend", function showInfo(){
	   var cp = map.getCenter();
	   clearMarkers();
	   laodMap(cp.lng, cp.lat);
	});
	
	function laodMap(lng,lat){
		
	   var param = {lng:lng,lat:lat};
		$.ajax({
			type: 'POST',
            dataType: 'json',
			contentType:'application/json;charset=UTF-8',
			url : '/dac/dm/map/mapList',
			data: angular.toJson(param)
		}).then(function(result) {
			if (result.httpCode == 200) {
				initMap(result.data);
			}
		});
	}
	
	//清除标记物，每次加载数据之前必须调用此方法
	function clearMarkers() {
	    map.clearOverlays();
	}
	
	var redIcon = new BMap.Icon("img/icon_red.png", new BMap.Size(40, 40));
	var grayIcon = new BMap.Icon("img/icon_gray.png", new BMap.Size(40, 40));
	var markers = [];//记录当前有多少个marker的数组
	// 创建标注
	function addMarker(index, point) {
	    var marker = new BMap.Marker(point);
	    map.addOverlay(marker);
	    var offset;
	    if (index < 9) {
	        offset = new BMap.Size(15, 5);
	    } else {
	        offset = new BMap.Size(10, 5);
	    }
	    var label = new BMap.Label(index+1, {
	        position: point,
	        offset: offset
	    });
	    label.setStyle({
	        color: '#fff',
	        border: 'none',
	        fontSize: '10px',
	        backgroundColor: 'rgba(0, 0, 0, 0)',
	        filter: 'alpha(opacity=0)'
	    });
	    label.setZIndex(1000);
	    markers.push(marker); //保存marker的数组
	    marker.addEventListener("click", markerClick);
	}
	
	var preMarker; //上一个点击的Marker
	//标注点 点击事件
	function markerClick(e) {
	    //对应在搜索结果显示
	
	}
	var allPoints = [];
	var redPoints = [];
	var contents = [];
	var dids = [];
	
	function initMap(data){
		var options1;
		var options;
		 $.each(data, function (n, value) { 
			 
			    var point = new BMap.Point(value.longitude, value.latitude);
			   
			    options = {
				        size: BMAP_POINT_SIZE_HUGE,
				        shape: BMAP_POINT_SHAPE_STAR,
				        color: '#ff3300'
			        }
			    redPoints.push(point);
			    allPoints.push(point);
			    contents.push(value.houseName);
			    dids.push(value.onenet_device_id+"||"+value.onenetKey+"||"+value.open_msg);
			    
         });  
		loadPoints(options,redPoints,contents,dids);
	}
	
		function loadPoints(options,points,contents,dids){
		if(document.createElement('canvas').getContext){ 
	
	        var pointCollection = new BMap.PointCollection(points, options); // 初始化PointCollection
	        pointCollection.addEventListener('click', function(e) {
	        	
	        	for(var i = 0;i<allPoints.length;i++){
	        		
		        	if(e.point.lng == allPoints[i].lng&&e.point.lat == allPoints[i].lat){		        		
		        		       		
		            	openInfo(contents[i],dids[i],e.point);
		        	}
	   			 }
			 
	        });
	        map.addOverlay(pointCollection);
	        map.addEventListener("zoomend",function(type,target){
	        	if(map.getZoom()>12&&map.getZoom()<14){
	        		pointCollection.setStyles({
			            size: BMAP_POINT_SIZE_BIGGER
			        });
	        	}else if(map.getZoom()>=14){
	        		pointCollection.setStyles({
			            size: BMAP_POINT_SIZE_HUGE
			        });
	        	}else{
		        	pointCollection.setStyles({
			            size: BMAP_POINT_SIZE_NORMAL
			        })
		        }
	        });
	    } else {
	        alert("当前浏览器不支持");
	    }   
	}
	
	function openInfo(content,onenets,p){
		var onenet =  onenets.split('||');
		var point = new BMap.Point(p.lng, p.lat);
		var did = onenet[0];
		var dkey = onenet[1];
		var open_msg = onenet[2];
		var msg = '<div class=\'info-link\'>门禁信息</div><p>'+ content +'</p><a href=\'javascript:void(0)\' onclick=\'deviceOpen("'+did+'","'+dkey+'","'+open_msg+'");\'>远程开门</a>';
		var infoWindow = new BMap.InfoWindow(msg);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
	
	function changeMarkerIcon(index, marker) {
	    if (preMarker) {
	        preMarker.setIcon(redIcon);
	    }
	    if (preMarker != marker) {
	        preMarker = marker;
	        marker.setIcon(blueIcon);
	    }
	}
	
	
	
	function deviceOpen(onenet_device_id,onenetKey,open_msg){
   
    	var msg = open_msg;
    	var devId = onenet_device_id;
    	var devKey = onenetKey;
    	var type = "webopen";
    	var openparam = {msg:msg,devId:devId,devKey:devKey,type:type};
		$.ajax({
			type: 'POST',
            dataType: 'json',
			contentType:'application/json;charset=UTF-8',
			url : '/hwapi/hw/api',
			data: angular.toJson(openparam)
		}).then(function(result) {
			if (result.httpCode == 200) {
				
                alert("请求成功");
			} else {
				alert(result.msg);
			}
		});
    }



	
</script> 
